/* 头部组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 头部变量 */
:root {
  --header-height: calc(56 * var(--unit));
  --header-height-large: calc(72 * var(--unit));
  --header-height-small: calc(48 * var(--unit));
  --header-padding-x: calc(16 * var(--unit));
  --header-padding-y: calc(12 * var(--unit));
  --header-gap: calc(12 * var(--unit));
  --header-background: var(--color-comp-background-primary);
  --header-border-color: var(--color-comp-divider);
  --header-transition-duration: 0.3s;
}

/* 基础头部样式 */
.header-sub,
.sub-header,
.header {
  margin: var(--margin-medium);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding: var(--header-padding-y) var(--header-padding-x);
  background-color: var(--header-background);
  transition: all var(--header-transition-duration) ease;
}

/* 头部尺寸变体 */
.header-large,
.header.large {
  min-height: var(--header-height-large);
  padding: calc(var(--header-padding-y) * 1.5) var(--header-padding-x);
}

.header-small,
.header.small {
  min-height: var(--header-height-small);
  padding: calc(var(--header-padding-y) * 0.75) var(--header-padding-x);
}

/* 头部内容区域 */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--header-gap);
  flex: 0 0 auto;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--header-gap);
  flex: 0 0 auto;
  margin-left: auto;
}

/* 头部标题 */
.header-title {
  font-size: var(--font-size-title-medium);
  font-weight: var(--font-weight-title);
  color: var(--color-font-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-subtitle {
  font-size: var(--font-size-title-sub-small);
  font-weight: var(--font-weight-title-sub);
  color: var(--color-font-secondary);
  margin: calc(4 * var(--unit)) 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 头部操作按钮 */
.header-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--unit));
  height: calc(40 * var(--unit));
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: var(--color-icon-primary);
  cursor: pointer;
  transition: all var(--header-transition-duration) ease;
  flex-shrink: 0;

  &:hover {
    background-color: var(--color-interactive-hover);
  }

  &:active {
    background-color: var(--color-interactive-pressed);
    transform: scale(0.95);
  }

  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

.header-action-icon {
  width: calc(20 * var(--unit));
  height: calc(20 * var(--unit));
  fill: currentColor;
}

/* 头部样式变体 */
.header-bordered,
.header.bordered {
  border-bottom: 1px solid var(--header-border-color);
}

.header-shadow,
.header.shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-sticky,
.header.sticky {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--header-background);
}

.header-fixed,
.header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--header-background);
}

/* 头部背景变体 */
.header-transparent,
.header.transparent {
  background-color: transparent;
}

.header-emphasize,
.header.emphasize {
  background-color: var(--color-brand10);
  border-bottom: 1px solid var(--color-brand20);
}

/* 头部布局变体 */
.header-vertical,
.header.vertical {
  flex-direction: column;
  align-items: flex-start;

  .header-left,
  .header-right {
    width: 100%;
    justify-content: space-between;
  }

  .header-center {
    width: 100%;
    justify-content: flex-start;
    margin-top: var(--header-padding-y);
  }
}

.header-center-only,
.header.center-only {
  justify-content: center;

  .header-left,
  .header-right {
    display: none;
  }
}

/* 响应式适配 */
@media (max-width: @breakpoint-small) {
  .header,
  .header-sub,
  .sub-header {
    --header-padding-x: calc(12 * var(--unit));
    --header-gap: calc(8 * var(--unit));
  }

  .header-title {
    font-size: var(--font-size-title-sub-large);
  }

  .header-subtitle {
    font-size: var(--font-size-caption-large);
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .header-emphasize,
  .header.emphasize {
    background-color: rgba(49, 122, 247, 0.1);
    border-bottom-color: rgba(49, 122, 247, 0.2);
  }
}
